<template>
	<view class="gather">
		<!-- <view class="around a-c">
			<view class="tab-item t-c column a-c" @click="checkType(2)">
				<view :class="type===2?'act':''">学集视频</view>
				<image v-if="type === 2" src="/static/home/b.png" mode="widthFix" class="icon-36" />
			</view>
			<view class="tab-item t-c column a-c" @click="checkType(1)">
				<view :class="type===1?'act':''">学集照片</view>
				<image v-if="type === 1" src="/static/home/b.png" mode="widthFix" class="icon-36" />
			</view>
		</view> -->
		<view class="list" v-if="type == 2">
			<block v-for="(item,index) in list" :key="index">
				<view class="item">
					<view class="cover_img">
						<image class="img" :src="item.content" mode="" v-if="item.type==1"></image>
						<video class="img" v-if="item.type==2" :src="item.content" controls :id="'id'+item.id"
						object-fit="fill"
							@play="videoPlayHandle('id'+item.id)"></video>
					</view>
					<view class="title" v-if="item.title">{{item.title}}</view>
				</view>
			</block>
		</view>
		<view class="" v-else>
			<block v-for="(v,i) in list" :key="i">
				<view class="pic-item">
					<view class="">{{ v.title}}</view>
					<view class="pic-item-imgbox">
						<image v-for="(img,index) in v.images" :key="index" :src="img" @click="preview(v.images,index)" mode="aspectFill"></image>
					</view>
				</view>
			</block>
		</view>
		<view style="text-align: center;" v-if="list.length==0">
			<image style="width: 200rpx;height: 200rpx;" src="../../static/nodata.png"></image>
			<view style="color: #999;text-align: center;">暂无数据</view>
		</view>
		<view style="text-align: center;color: #999;" v-if="noMoreData&&list.length!=0">
			没有更多啦
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				video: null,
				list: [],
				noMoreData: false,
				lastPage: 1,
				page: 1,
				type: 1, // 2.视频 1.图文
			}
		},
		onLoad() {},
		onShow() {
			this.page = 1
			this.getlist()
		},
		onReachBottom() {
			if (this.page < this.lastPage) {
				this.page += 1
				this.getlist()
			} else {
				this.noMoreData = true
			}
		},
		methods: {
			checkType(i) {
				this.type = i;
				this.page = 1;
				this.getlist();
			},
			videoPlayHandle(id) {
				let newVideo = uni.createVideoContext(id);
				newVideo.id = id;
				if (!this.video) {
					this.video = newVideo;
					this.video.play();
					return
				}
				if (this.video.id !== newVideo.id) {
					newVideo.play();
					this.video.pause();
					this.video = newVideo;
				}
			},
			async getlist() {
				const res = await this.$api.get('ebLearning/list', {
					type: this.type,
					page: this.page
				});
				// console.log(res, "学集")
				if (res.code == 200) {
					const {
						list,
						totalPage
					} = res.data
					if (this.page == 1) {
						this.list = list || [];
						this.lastPage = totalPage || 1;
					} else {
						this.list.push(...list);
					}
					this.page != 1 && list.length == 0 ? this.noMoreData = true : this.noMoreData = false
				}

			},
			preview(urls,current) {
				uni.previewImage({
					urls,
					current
				})
			},
			
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.gather {
		padding: 26rpx;
		box-sizing: border-box;
		
		.tab-item {
			font-size: 27rpx;
			margin-bottom: 27rpx;
			.act {
				font-size: 32rpx;
				color: #2E80FE;
				font-weight: bold;
			}
			.icon-36 {
				width: 36rpx;
				height: 14rpx;
			}
		}

		.list {
			.item {
				background-color: #fff;
				border-radius: 20rpx;
				overflow: hidden;
				margin-bottom: 20rpx;

				.cover_img {
					position: relative;
					width: 100%;
					height: 294rpx;

					.img {
						width: 100%;
						height: 100%;
					}

					.play_btn {
						width: 100%;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
						bottom: 0;
						z-index: 2;

						image {
							width: 80rpx;
							height: 80rpx;
						}
					}
				}

				.title {
					font-size: 30rpx;
					font-weight: bold;
					padding: 26rpx;
					box-sizing: border-box;
				}
			}
		}
		
		.pic-item {
			margin: 27rpx 0;
			background-color: #FFF;
			padding: 25rpx 27rpx 27rpx;
			font-weight: bold;
			font-size: 27rpx;
			border-radius: 20rpx;
			.pic-item-imgbox {
				display: grid;
				grid-template-columns: 33% 33% 33%;
				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 10rpx;
					margin-top: 15rpx;
				}
			}
		}
	}
</style>